<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper title='商城banner图管理'>
    <a-card :body-style="{padding: '24px 32px'}" :bordered='false'>
      <a-form
        @submit='handleSubmit'
        :form='form'
        :labelCol='{lg: {span: 7}, sm: {span: 7}}'
        :wrapperCol='{lg: {span: 7}, sm: {span: 17} }'>
        <a-form-item
          label='banner图'
        >
          <d-upload
            v-decorator="['banners', {initialValue:[]}]"
            multiple
          />
        </a-form-item>
        <a-form-item
          :wrapperCol='{ span: 24 }'
          style='text-align: center'
        >
          <a-button htmlType='submit' type='primary'>提交</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { shopBannerList, shopBannerAdd } from '@/api/app'

export default {
  name: 'AppIndex',
  data() {
    return {
      form: this.$form.createForm(this),
      banners: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // handler
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        shopBannerAdd(values).then(res => {
          this.$message.success('操作成功')
        })
      })
    },
    getList() {
      shopBannerList().then(res => {
        try {
          this.banners = JSON.parse(res.data.banner)
          this.form.setFieldsValue({ banners: this.banners })
          console.log(this.form.getFieldsValue())
        } catch (error) {
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
.ant-upload-picture-card-wrapper {
  /deep/ .ant-upload-list-picture-card-container, /deep/ .ant-upload-list-item, /deep/ .ant-upload {
    width: 200px !important;
  }
}
</style>
